<template>
  <div class="article-page" style="height: 87vh; overflow: auto">
    <!-- 文章详情卡片 -->
    <a-card class="article-card">
      <!-- 文章标题 -->
      <h1 class="article-title">{{ articles.title }}</h1>

      <!-- 文章元信息 -->
      <div class="article-meta">
        <!-- <a-avatar :size="40" :src="article.author.avatar" /> -->
        <div class="meta-info">
          <!-- <span class="author-name">{{ article.author.name }}</span> -->
          <div class="meta-extra">
            <span><clock-circle-outlined /> {{ articles.createTime }}</span>
            <!-- <span><eye-outlined /> {{ article.views }} 阅读</span>
            <span><like-outlined /> {{ article.likes }} 点赞</span> -->
          </div>
        </div>
      </div>

      <!-- 文章内容 -->
      <div class="article-content" v-html="articles.contents"></div>

      <!-- 文章操作 -->
      <!--      <div class="article-actions">-->
      <!--        <a-button type="primary" @click="likeArticle">-->
      <!--          <template #icon><like-outlined /></template>-->
      <!--          点赞-->
      <!--        </a-button>-->
      <!--        <a-button @click="shareArticle">-->
      <!--          <template #icon><share-alt-outlined /></template>-->
      <!--          分享-->
      <!--        </a-button>-->
      <!--        <a-button @click="collectArticle">-->
      <!--          <template #icon><star-outlined /></template>-->
      <!--          收藏-->
      <!--        </a-button>-->
      <!--      </div>-->
    </a-card>

    <!-- 评论区域 -->
    <a-card class="comment-section" title="评论">
      <template #extra>
        <span><message-outlined /> {{ comments.length }} 条评论</span>
      </template>

      <!-- 评论表单 -->
      <div class="comment-form">
        <a-avatar :size="40" :src="currentUser.avatar" />
        <a-textarea
          v-model:value="newComment"
          placeholder="写下你的评论..."
          :rows="3"
          class="comment-input"
        />
        <div class="form-actions">
          <a-button
            type="primary"
            @click="submitComment"
            :disabled="!newComment.trim()"
            >发表评论</a-button
          >
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="comment-list">
        <div v-for="comment in comments" :key="comment.id" class="comment-item">
          <div class="comment-content">
            <div class="comment-header">
              <span class="username">{{ comment.createTime }}</span>
              <span class="comment-time"></span>
            </div>
            <div class="comment-text">{{ comment.contents }}</div>
      

     
         
          </div>
        </div>
      </div>
    </a-card>
  </div>
  <br /><br /><br />
</template>

<script setup>
import { useRoute } from "vue-router";
import { selectArticle, contentsAddContents,selectContents } from "@/api/Login";
import { onMounted, ref } from "vue";
import {
  ClockCircleOutlined,
  EyeOutlined,
  LikeOutlined,
  ShareAltOutlined,
  StarOutlined,
  MessageOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
// import { format } from 'date-fns';
// 文章数据
const article = ref({
  id: 1,
  title: "Vue3 与 Ant Design 最佳实践",
  content:
    "<p>Vue 3 提供了更好的性能和更灵活的 Composition API，结合 Ant Design Vue 可以快速构建企业级应用。</p><p>本文将介绍如何高效使用这两个技术栈...</p>",
  author: {
    id: 1,
    name: "技术作者",
    avatar: "https://joeschmoe.io/api/v1/random",
  },
  publishTime: new Date("2023-06-10"),
  views: 1568,
  likes: 89,
  tags: ["Vue3", "Ant Design", "前端"],
});

// 评论数据
const comments = ref([
  {
    id: 1,
    user: {
      id: 2,
      name: "开发者A",
      avatar: "https://joeschmoe.io/api/v1/random",
    },
    content: "这篇文章很有帮助，特别是组合式API的部分讲得很清楚",
    time: new Date("2023-06-11"),
    likes: 5,
    replies: [
      {
        id: 101,
        user: {
          id: 3,
          name: "开发者B",
          avatar: "https://joeschmoe.io/api/v1/random",
        },
        content: "同意，比选项式API更灵活",
        time: new Date("2023-06-11"),
        likes: 2,
      },
    ],
  },
  {
    id: 2,
    user: {
      id: 4,
      name: "前端工程师",
      avatar: "https://joeschmoe.io/api/v1/random",
    },
    content: "请问有关于Ant Design Pro的集成示例吗？",
    time: new Date("2023-06-12"),
    likes: 3,
    replies: [],
  },
]);

// 当前用户
const currentUser = ref({
  id: 5,
  name: "当前用户",
  avatar: "https://joeschmoe.io/api/v1/random",
});

// 表单数据
const newComment = ref("");
const activeReplyId = ref(null);
const replyContent = ref("");

// 格式化日期
const formatDate = (date) => {
  return format(new Date(date), "yyyy-MM-dd HH:mm");
};

// 点赞文章
const likeArticle = () => {
  article.value.likes++;
  message.success("点赞成功");
};

// 分享文章
const shareArticle = () => {
  message.info("分享功能即将上线");
};

// 收藏文章
const collectArticle = () => {
  var now = new Date();

  // 获取年、月、日、小时、分钟和秒
  var year = now.getFullYear();
  var month = now.getMonth() + 1; // 注意：月份是从0开始的，所以需要加1
  var day = now.getDate();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  console.log(
    "当前日期和时间：",
    year,
    "-",
    month,
    "-",
    day,
    " ",
    hours,
    ":",
    minutes,
    ":",
    seconds
  );
};

// 提交评论
const submitComment = () => {
  let time = collectArticle();
  let data = {
    contents: newComment.value,
    articleId: route.query.from,
    userId: JSON.parse(sessionStorage.getItem("user")).id,
    creatTime: time,
  };
  contentsAddContents(data).then(() => {
    message.success("评论发表成功");
    selectContentFun();
  });
  console.log(newComment.value);
  newComment.value = "";
};
//评论列表
const selectContentFun = () => {

  selectContents({
    articleId:route.query.from
  }).then((res) => {
    comments.value = res.data
  });
};

// 回复评论
const replyToComment = (comment) => {
  activeReplyId.value = comment.id;
  replyContent.value = "";
};

// 取消回复
const cancelReply = () => {
  activeReplyId.value = null;
};

// 提交回复
const submitReply = (comment) => {
  if (!comment.replies) {
    comment.replies = [];
  }

  comment.replies.push({
    id: Date.now(),
    user: currentUser.value,
    content: replyContent.value,
    time: new Date(),
    likes: 0,
  });

  activeReplyId.value = null;
  message.success("回复成功");
};

// 点赞评论
const likeComment = (comment) => {
  comment.likes++;
  message.success("点赞成功");
};

// 点赞回复
const likeReply = (reply) => {
  reply.likes++;
  message.success("点赞成功");
};
const articles = ref({});
const fromFun = (val) => {
  selectArticle({ id: val }).then((res) => {
    if (res.code == 200) {
      console.log(res.data);
      articles.value = res.data;
    }
  });
};
const route = useRoute();
onMounted(() => {
  console.log(route.query.from);
  fromFun(route.query.from);
  selectContentFun()
});
</script>

<style scoped>
.article-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.article-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.article-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.85);
}

.article-meta {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.meta-info {
  margin-left: 12px;
}

.author-name {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.meta-extra {
  margin-top: 4px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.meta-extra > span {
  margin-right: 16px;
}

.article-content {
  line-height: 1.8;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 24px;
}

.article-actions {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  display: flex;
}

.article-actions .ant-btn {
  margin-right: 16px;
}

.comment-section {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.comment-form {
  display: flex;
  margin-bottom: 24px;
}

.comment-input {
  flex: 1;
  margin-left: 12px;
  margin-right: 12px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.comment-list {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

.comment-item {
  display: flex;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.comment-content {
  flex: 1;
  margin-left: 12px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.username {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.comment-time {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.comment-text {
  margin-bottom: 8px;
  line-height: 1.6;
}

.comment-actions {
  display: flex;
}

.comment-actions .ant-btn {
  padding: 0 8px;
}

.reply-form {
  margin-top: 12px;
  margin-bottom: 12px;
}

.reply-input {
  margin-bottom: 8px;
}

.reply-list {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid #f0f0f0;
}

.reply-item {
  display: flex;
  margin-bottom: 12px;
}

.reply-content {
  flex: 1;
  margin-left: 12px;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.reply-time {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.reply-text {
  line-height: 1.6;
  margin-bottom: 4px;
}

.reply-actions {
  display: flex;
}

.reply-actions .ant-btn {
  padding: 0 8px;
  height: auto;
}
</style>
